<!-- 新增分区 -->
<template>
  <div>
    <div id="printBill">
      <div class="print-box">
        <div class="font-weight-600 font-size-24 margin-bottom-50 title">退场函</div>
        <el-descriptions :column="2">
          <el-descriptions-item label="退场时间">{{ model.zhangdanzhouqikaishishijian | formatDateTime('YYYY-MM-DD') }} </el-descriptions-item>
          <el-descriptions-item label="退场说明">{{ model.fukuanjiezhiriqi }}</el-descriptions-item>
          <el-descriptions-item label="退还押金">{{ model.zhangdanjine }}元</el-descriptions-item>
          <el-descriptions-item label="退还广告费">{{ model.zhinajine }}元</el-descriptions-item>
          <el-descriptions-item label="退还场地租赁费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="退还水费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="退还电费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="退还燃气费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="退还车位费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取租金">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取管理费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取滞纳金">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取赔偿">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取水费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取电费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取燃气费">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取共享空间费用">{{ model.yingfujine }}元</el-descriptions-item>
          <el-descriptions-item label="收取车位费">{{ model.yingfujine }}元</el-descriptions-item>
        </el-descriptions>
        <div class="flex img-box">
            <div></div>
            <img class="img" :src="model.zhengzhang" style="margin-left:350px;"/>
        </div>
      </div>
    </div>
    <el-button type="primary" size="mini" @click="doPrint" class="margin-top-20" style="margin-left:850px;">打印</el-button>
  </div>
</template>
<script>
  import print from 'print-js';
  export default {
    props: {},
    data() {
      return {
        model: {
          zhangdanleixing: '水费',
          guanlianhetong: '关联合同',
          zichangmingcheng: '水费',
          zhangdanzhouqikaishishijian: 1644823190673,
          zhangdanzhouqijeihsushijian: 1644823190673,
          fukuanjiezhiriqi: 1644823190673,
          zhangdanjine: 100,
          zhinajine: 25,
          yingfujine: 100,
          zhengzhang: 'https://img0.baidu.com/it/u=37271326,3401056868&fm=253&fmt=auto&app=138&f=JPG?w=320&h=266',
        },
      };
    },

    mounted() {},

    methods: {
      doPrint() {
        const style = '@page {margin:0 10mm};'; //打印时去掉眉页眉尾
        //打印为什么要去掉眉页眉尾？因为眉页title时打印当前页面的title，相当于是获取html中title标签里面的内容，但是比如我打印的内容只是一个弹框里面的内容，是没有title的，这时候就会出现undefined，为了避免出现这种情况，就可以隐藏眉页眉尾
        printJS({
          printable: 'printBill', // 标签元素id
          type: 'html',
          header: '',
          targetStyles: ['*'],
          style,
        });
        //各个配置项
        //printable:要打印的id。
        //type:可以是 html 、pdf、 json 等。
        //properties:是打印json时所需要的数据属性。
        //gridHeaderStyle和gridStyle都是打印json时可选的样式。
        //repeatTableHeader:在打印JSON数据时使用。设置为时false，数据表标题将仅在第一页显示。
        //scanStyles:设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用，此时自己设置的原来想要打印的样式就会失效，在打印预览时可以看到效果
        //targetStyles: [’*’],这样设置继承了页面要打印元素原有的css属性。
        //style:传入自定义样式的字符串，使用在要打印的html页面 也就是纸上的样子。
        //ignoreElements：传入要打印的div中的子元素id，使其不打印。非常好用
      },
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-descriptions-item__container {
    padding-bottom: 50px;
  }
  .print-box {
    width: 1000px;
    margin: 50px 100px;
  }
  .title {
    padding-left: 300px;
  }
  .img-box {
      .img,div {
        width: 150px;
        height: 150px;
      }
  }
</style>
